<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/loop.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="css//bootstrap.css">
    <link rel="icon" href="./images/icon.png">
    <title>轮播图管理</title>
    <script>
        // function selFile() {
        //     document.querySelector('#myFile').click()
        // }
        // function showFile(inputFile) {
        //     var file = inputFile.files[0]
        //     var type = file.type        //获取文件类型
        //     var size = file.size
        //     //创建文件读取对象
        //     var reader = new FileReader()
        //     reader.onload = function (e) {
        //         console.log(e.target.result)
        //         if (/^image\/\w+/gi.test(type) && size <= 1024 * 1024 * 1024 * 1024) {
        //             document.querySelector('.loop').innerHTML = '<img src="' + e.target.result + '" />';
        //         }
        //     }
        //     if (/image\/\w+/gi.test(type) && size <= 1024 * 1024 * 2) {
        //         reader.readAsDataURL(file)      //读取图片文件,图片文件转变成base64格式（字符串）
        //     } else {
        //         alert('您选择的图片不符合要求，请重新上传！')
        //     }
        // }
        // $(function () {
        //     $('#flexSwitchCheckDefault').click(function () {
        //         $('.form-check-input').prop("checked", this.checked)
        //     })
        //     $('#del').click(function () {
        //         if ($('.form-check-input:checked').length > 0) {
        //             if (confirm('确认要删除此图片吗？')) {
        //                 $('.form-check-input:checked').parent().parent().remove()
        //             }
        //         } else {
        //             alert('未选中需要删除的图片')
        //         }
        //     })
        // })
    </script>
</head>

<body>
    <iframe src="./header.html" scrolling="no" frameborder="0" width="100%" height="45px" frameborder="0"></iframe>
    <iframe src="./personalCenter.html" scrolling="no" frameborder="0" width="100%" height="70px"
        frameborder="0"></iframe>
    <div class="outer">
        <!-- <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
            <label class="form-check-label" for="flexSwitchCheckDefault">全选</label>
        </div> -->
        
        <!-- <button type="button" class="btn btn-outline-secondary" id="del">删除</button> -->
        <!-- <input type="file" name="" id="myFile" onchange="showFile(this)"> -->
        <!-- <input class="btn btn-outline-secondary" type="button" value="上传图片" onclick="selFile()"> -->
        <table class="table table-hover tableStyle">
            <thead>
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">轮播图片地址</th>
                    <th scope="col">操作</th>
                    <th scope="col"></th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>上1</td>
                    <td><div class="yemianloopurl"></div></td>
                    <td>修改</td>
                </tr>
                <tr>
                    <td>上2</td>
                    <td><div class="yemianloopurl"></td>
                    <td>修改</td>
                </tr>
                <tr>
                    <td>上3</td>
                    <td><div class="yemianloopurl"></td>
                    <td>修改</td>
                </tr>
                <tr>
                    <td>上4</td>
                    <td><div class="yemianloopurl"></td>
                    <td>修改</td>
                </tr>
                <tr>
                    <td>下1</td>
                    <td><div class="yemianloopurl"></td>
                    <td>修改</td>
                </tr>
                <tr>
                    <td>下2</td>
                    <td><div class="yemianloopurl"></td>
                    <td>修改</td>
                </tr>
                <tr>
                    <td>下3</td>
                    <td><div class="yemianloopurl"></td>
                    <td>修改</td>
                </tr>
                <tr>
                    <td>下4</td>
                    <td><div class="yemianloopurl"></td>
                    <td>修改</td>
                </tr>
            </tbody>
        </table>

        <nav class="looppageManage">
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link">Previous</a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item " aria-current="page">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>
    </div>
    <div id="footer">
        <iframe src="footer.html" height="320px" width="100%" frameborder="0" scrolling="no"></iframe>
    </div>
</body>

</html>